<template>
  <el-menu
    :style="hasBorder?'border:0!important;':''"
    :default-active="defaultActive"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    router
    active-text-color="#ffd04b"
  >
    <el-menu-item index="/film" route="/film"
      >正在热映<el-badge :value="len" class="item"></el-badge
    ></el-menu-item>
    <el-submenu index="2">
      <template slot="title">个人中心</template>
      <el-menu-item index="/myinfo" route="/myinfo">基本信息</el-menu-item>
      <el-menu-item index="/order" route="/order">我的订单</el-menu-item>
    </el-submenu>
  </el-menu>
</template>

<script>
import axios from 'axios'
export default {
  name: 'VueIndex',
  props: {
    hasBorder: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    defaultActive () {
      return '/' + this.$route.path.split('/').reverse()[0]
    }
  },
  data () {
    return {
      activeIndex: '1',
      activeIndex2: '1',
      len: 0
    }
  },

  mounted () {
    axios({
      url: '/api/movie/getLenReleased',
      type: 'GET'
    }).then((res) => {
      this.len = res.data.data
    })
  },

  methods: {}
}
</script>

<style lang="scss" scoped>
.el-menu--horizontal > .el-menu-item {
  margin-left: 38%;
}
.el-menu--horizontal > .el-submenu {
  margin-left: 25%;
}
.item {
  // top: 29px;
  right: -6px;
}
</style>
